<template>
  <div id="app">
  <!--<transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">-->
      <!--<keep-alive>-->
        <router-view />
      <!--</keep-alive>-->
  <!--</transition>-->
    <van-tabbar v-model="active" class="footbar" v-if="isShowFoot">
		<van-tabbar-item icon="yemian-copy" :to="{name: 'Home'}" >首页</van-tabbar-item>
		<van-tabbar-item icon="wode" :to="{name: 'UserIndex'}">我的</van-tabbar-item>
	</van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'
import {mapState} from 'vuex'
export default {
  name: 'app',
  components: {
		[Tabbar.name]: Tabbar,
		[TabbarItem.name]: TabbarItem,
	},
  computed: {
      ...mapState({
        isShowFoot:state => state.user.isShowFoot,
        // direction:state => state.user.direction,
        route: state => state.route,
        path: state => state.route.path,
      }),
      active:{
      	get:function() {
	      	// console.log('[active]',this.route)
	      	if(this.route.path == ('/')) return 0
			else if(this.route.path == ('/user_index')) return 1
	    },
		set:function() {}
	  }
  },
  data() {
  	return {
  		// active: 0 
  	} 
  },
}
</script>

<style scoped>
 .vux-pop-out-enter-active,
 .vux-pop-out-leave-active,
 .vux-pop-in-enter-active,
 .vux-pop-in-leave-active {
   will-change: transform;
   transition: all 500ms;
   width: 100%;
   height: 100%;
   top: 0;
   position: absolute;
   backface-visibility: hidden;
   perspective: 1000;
 }

 .vux-pop-out-enter {
   opacity: 0;
   transform: translate3d(-100%, 0, 0);
 }

 .vux-pop-out-leave-active {
   opacity: 0;
   transform: translate3d(100%, 0, 0);
 }

 .vux-pop-in-enter {
   opacity: 0;
   transform: translate3d(100%, 0, 0);
 }

 .vux-pop-in-leave-active {
   opacity: 0;
   transform: translate3d(-100%, 0, 0);
 }
</style>
